<template >
  <el-container style="width: 100%; height: 100%">
    <el-main style="padding: 0;width: 100%; height: 100%">
      <div ref="scrollbarRef" style="
          background-color: #f0f2f5;
          border-radius: 5px;
          height: 70%;
          overflow-y: scroll;
        ">
        <div ref="refFlow">
          <el-row v-for="item in messages" :key="item"
            :class="'CFlow ' + (item.user == RYD_UserId ? 'CFlow-right' : 'CFlow-left')">
            <el-avatar style="background-color: #fff; color: #000">
              {{ item.user == "win" ? "Ryder" : "你" }}
            </el-avatar>
            <div :class="
              'bubble ' + (item.user == RYD_UserId ? 'bubble-right' : 'bubble-left')
            ">
              {{ item.message }}
            </div>
            <div style="width: 1000px"></div>
            <van-cell-group inset :class="
              'bubble-item ' +
              (item.user == RYD_UserId ? 'bubble-item-right' : 'bubble-item-left')
            " v-if="item.items">
              <van-cell class="bubble-item-items" v-for="(minItem, index) in item.items" :key="minItem"
                :title="index + 1 + '、' + minItem.ryD_DemandDetails" @click="btnBubble(minItem)"></van-cell>
            </van-cell-group>
            <el-popover :visible="showPopover == item.data.ryD_Id" v-if="item.data" placement="top" :width="160">
              <el-button @click="btnUseful()" type="success">有用</el-button>
              <el-button @click="btnUseless()" type="danger">无用</el-button>
              <template #reference>
                <van-cell-group inset v-if="item.data" :class="
                  'bubble-item-data ' +
                  (item.user == RYD_UserId ? 'bubble-item-right' : 'bubble-item-left')
                " @click="btnShowUse(item)">
                  <van-cell title="用户提出的问题详情：" :value="item.data.ryD_DemandDetails"></van-cell>

                  <van-cell title="图片附件:" v-if="item.data.ryD_Files">
                    <template #label>
                      <el-space alignment="flex-start" style="width: 100%">
                        <el-image style="width: 100px; height: 100px" :src="items" fit="contain"
                          v-for="(items, index) in item.data.ryD_Files.split('|')" :key="index"
                          :preview-src-list="item.data.ryD_Files.split('|')" :initial-index="index" />
                      </el-space>
                    </template>
                  </van-cell>
                  <van-cell title="IT分析的具体问题原因：" :value="item.data.ryD_Reason"></van-cell>
                  <van-cell title="IT提供的解决方案：" :value="item.data.ryD_Solution"></van-cell>
                </van-cell-group>
              </template>
            </el-popover>

          </el-row>
        </div>
      </div>
      <el-row style="bottom: 0;height: 30% ;">
        <van-field v-model="sendText" rows="3" autosize type="textarea" placeholder="请输入关键词" style="height: 100% ;">
          <template #button>
            <van-button size="normal" type="primary" @click="send">发送</van-button>
          </template>
        </van-field>
      </el-row>
    </el-main>
  </el-container>
</template>
<script setup>
import { inject, ref } from "vue";
import axios from "@/utils/axios";

import { Toast } from "vant";

document.onkeydown = function (event) {
  let key = event.code;
  // console.log(key)
  if (key == "Enter" && event.ctrlKey == false) {
    send();
    return false;
  }
  if (key == "Enter" && event.ctrlKey == true) {
    sendText.value = sendText.value == null ? "" : sendText.value + "\n";
  }
};

let RYD_UserId = inject("RYD_UserId");
let RYD_Company = ref();
let RYD_State = ref();
let scrollbarRef = ref();
let refFlow = ref();
let sendText = ref();
let messages = ref([]);
let showPopover = ref();
let getUseList =
  sessionStorage.getItem("UseList") == null
    ? []
    : sessionStorage.getItem("UseList").split(",");

let btnShowUse = (item) => {
  let flag = false;
  if (getUseList == null) {
    sessionStorage.setItem("UseList", []);
    getUseList = [];
  } else {
    getUseList.forEach((element) => {
      if (element == item.data.ryD_Id) {
        flag = true;
      }
    });
  }
  if (flag) {
    return;
  }
  if (showPopover.value == item.data.ryD_Id) {
    showPopover.value = 0;
  } else {
    showPopover.value = item.data.ryD_Id;
  }
};

let btnUseful = () => {
  axios({
    method: "get",
    url: "/api/AddUseful?RYD_Id=" + showPopover.value,
  }).then(() => {
    Toast("评价成功");
    getUseList.push(showPopover.value);
    sessionStorage.setItem("UseList", getUseList);
    showPopover.value = 0;
  });
};
let btnUseless = () => {
  axios({
    method: "get",
    url: "/api/AddUseless?RYD_Id=" + showPopover.value,
  }).then(() => {
    Toast("评价成功");
    getUseList.push(showPopover.value);
    sessionStorage.setItem("UseList", getUseList);
    showPopover.value = 0;
  });
};

let btnBubble = (item) => {
  messages.value.push({
    user: "win",
    message: "问题详情：",
    data: {
      ...item,
    },
    isAvatar: true,
  });
  heightAuto();

  axios({
    method: "get",
    url: "/api/AddCTR?RYD_Id=" + item.ryD_Id,
  });
};

let send = () => {
  if (sendText.value == null || sendText.value == "") {
    return;
  }
  messages.value.push({
    user: RYD_UserId,
    message: sendText.value,
    isAvatar: true,
  });
  heightAuto();

  axios({
    method: "post",
    url: "/api/KnowledgeBase",
    data: {
      RYD_Company: RYD_Company.value,
      RYD_DemandDetails: sendText.value,
      Num: 10,
    },
  }).then((res) => {
    if (res.length != 0) {
      messages.value.push({
        user: "win",
        message: "你好，搜索到的内容如下：",
        items: res,
      });
      heightAuto();
    } else {
      messages.value.push({
        user: "win",
        message: "很抱歉没能搜索到相关问题，请您试试其他关键词。",
      });
    }
  });
  sendText.value = null;
};
let heightAuto = () => {
  let height = refFlow.value.offsetHeight;

  setTimeout(() => {
    scrollbarRef.value.scrollTop = height;
  }, 100);
};

let initData = () => {
  Promise.all([
    axios({
      method: "get",
      url: "/api/GetCompany?RYD_UserId=" + RYD_UserId,
    }).then((res) => {
      RYD_Company.value = res;
    }),
    axios({
      method: "get",
      url: "/api/GetState?RYD_UserId=" + RYD_UserId,
    }).then((res) => {
      RYD_State.value = res;
    }),
  ]).then(() => {
    robotSend(
      RYD_Company.value,
      "",
      10,
      "您好，我们为您筛选了10条常用问题，点击下方序列内容查看解决方法，您也可以向我发送简短的关键词，我将为你搜索符合的问题和解决方案！"
    );
  });
};
initData();
let robotSend = (RYD_Company, text, Num, resText) => {
  axios({
    method: "post",
    url: "/api/KnowledgeBase",
    data: {
      RYD_Company: RYD_Company,
      RYD_DemandDetails: text,
      Num: Num,
    },
  }).then((res) => {
    if (res.length != 0) {
      messages.value.push({
        user: "win",
        message: resText,
        items: res,
      });
      heightAuto();
    }
  });
};
</script>

<style scoped>
.bubble {
  margin: 10px;
  font-size: 1rem;
  word-wrap: break-word;
  line-height: 1.5;
  overflow-wrap: break-word;
  padding: 8px 16px;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  white-space: pre-wrap;
  max-width: 680px;
  min-width: 1px;
}

.bubble-left {
  background-color: #fff;
  border-radius: 1px 10px 10px 10px;
}

.bubble-right {
  background-color: #466da338;
  border-radius: 10px 1px 10px 10px;
}

.bubble-item {
  font-size: 1rem;
  word-wrap: break-word;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  width: 745px;
  margin-bottom: 10px;
  max-width: 745px;
}

.bubble-item-data {
  font-size: 1rem;
  word-wrap: break-word;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  width: 500px;
  margin-bottom: 10px;
  max-width: 500px;

}

.bubble-item-left {
  background-color: #fff;
  border-radius: 10px 10px 10px 10px;
}

.bubble-item-right {
  background-color: #466da338;
  border-radius: 10px 10px 10px 10px;
}

.CFlow-right {
  flex-direction: row-reverse;
}

.CFlow {
  padding: 10px 0 0 10px;
}

.bubble-item-items:hover {
  background-color: rgba(170, 170, 170, 0.2);
  cursor: pointer;
}
</style>
